<template>
      <div id="wrapper">
          <!--使用子组件-->
          <city-header></city-header>
          <city-search
           :cities="cities"
          ></city-search>
          <city-list
           :hotCity="hotCities"
           :cities="cities"
           :letter="letter"
          ></city-list>
          <city-aside
            :cities="cities"
            @change="cityClickChange"
          ></city-aside>
      </div>
</template>

<script>
   import CityHeader from '@/pages/city/components/Header'
   import CitySearch from '@/pages/city/components/Search'
   import CityList from '@/pages/city/components/List'
   import CityAside from '@/pages/city/components/Aside'
   import axios from 'axios'
    export default {
        name: "City",
        components:{
           CityHeader,
           CitySearch,
           CityList,
           CityAside
        },
        data () {
          return {
             hotCities:[],//热门城市
             cities:{},// 所有城市
             letter:"" // ABCD
          }
        },
        methods:{
           getCityInfo(){
              axios.get("static/moke/city.json").then(this.getSucc)
           },
           getSucc: function (res) {
            // console.log(res.data);
                let data= res.data;
                if (data.ret && data.data) {
                  this.hotCities = data.data.hotCities;//热门城市
                  this.cities = data.data.cities;//所有城市
                }
          },
           cityClickChange(res){ //监听事件
              this.letter=res;
          }

        },
        mounted () {//当页面加载后
          this.getCityInfo();
        }
    }
</script>

<style scoped>

</style>
